<template>
  <div class="menu">
    <el-col>
      <p class="te">我的会议</p>
      <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @close="handleClose"
          background-color="#ffffff"
          text-color="black"
          active-text-color="#ffffff"
      >

        <el-menu-item index="7" @click="goDashboard">
          <el-icon>
            <svg-icon name="icon-dashboard"></svg-icon>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('Dashboard') }}</span>
          </template>
        </el-menu-item>

        <el-menu-item index="2" @click="goConferenceList">
          <el-icon>
            <svg-icon name="icon-conference-list"></svg-icon>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('ConferenceList') }}</span>
          </template>
        </el-menu-item>

        <el-menu-item v-if="role===0" index="1" @click="goConferenceRoom">
          <el-icon>
            <svg-icon name="icon-conference-room"></svg-icon>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('ConferenceRoom') }}</span>
          </template>
        </el-menu-item>


        <el-menu-item index="3" @click="goConferenceReservations">
          <el-icon>
            <svg-icon name="icon-conference-reservations"></svg-icon>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('ConferenceReservations') }}</span>
          </template>
        </el-menu-item>

        <el-menu-item index="4" @click="goMeetingUsage">
          <el-icon>
            <el-icon-document/>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('MeetingUsage') }}</span>
          </template>
        </el-menu-item>

        <el-menu-item index="9" @click="goConferenceSummary">
          <el-icon>
            <svg-icon name="icon-conference-summary"></svg-icon>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('ConferenceSummary') }}</span>
          </template>
        </el-menu-item>

        <el-menu-item index="5" @click="goUserManagement" v-if="role == 1">
          <el-icon>
            <svg-icon name="icon-user-management"></svg-icon>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('UserManagement') }}</span>
          </template>
        </el-menu-item>
        <el-menu-item index="6" @click="goCampusManagement" v-if="role == 1">
          <el-icon>
            <svg-icon name="icon-campus-management"></svg-icon>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('CampusManagement') }}</span>
          </template>
        </el-menu-item>

        <el-menu-item index="10" @click="goDepartmentManagement" v-if="role == 1">
          <el-icon>
            <svg-icon name="icon-campus-management"></svg-icon>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('DepartmentManagement') }}</span>
          </template>
        </el-menu-item>

        <el-menu-item v-if="role!==0" index="1" @click="goConferenceRoom">
          <el-icon>
            <House/>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('ConferenceRoomManagement') }}</span>
          </template>
        </el-menu-item>
        <el-menu-item index="8" @click="goAnnouncementManagement" v-if="role == 1">
          <el-icon>
            <svg-icon name="icon-announcement-management"></svg-icon>
          </el-icon>
          <template v-slot:title>
            <span>{{ getPageText('AnnouncementManagement') }}</span>
          </template>
        </el-menu-item>

      </el-menu>
    </el-col>
  </div>
</template>

<script>
import {
  House as House,
  Menu as ElIconMenu,
  AlarmClock as ElIconAlarmClock,
  Document as ElIconDocument,
  User as ElIconUser,
} from '@element-plus/icons'
import SvgIcon from "@/components/SvgIcon.vue";

export default {
  components: {
    SvgIcon,
    House,
    ElIconMenu,
    ElIconAlarmClock,
    ElIconDocument,
    ElIconUser,
  },
  data() {
    return {
      // activeIndex 初始值可以根据实际需要调整
      activeIndex: this.calculateActiveIndex(),
    }
  },
  watch: {
    $route() {
      this.activeIndex = this.calculateActiveIndex()
    },
  },
  computed: {
    role() {
      return this.$store.getters.getRole
    },
  },

  methods: {
    getPageText(routeName) {
      const route = this.$router.options.routes[0].children.find(
          (r) => r.name === routeName
      )
      return route ? route.meta.pageText : ''
    },
    goConferenceList() {
      if (this.$router.currentRoute.name !== 'ConferenceList') {
        this.$router.push({name: 'ConferenceList'})
      }
    },
    goConferenceReservations() {
      if (this.$router.currentRoute.name !== 'ConferenceReservations') {
        this.$router.push({name: 'ConferenceReservations'})
      }
    },
    goMeetingUsage() {
      if (this.$router.currentRoute.name !== 'MeetingUsage') {
        this.$router.push({name: 'MeetingUsage'})
      }
    },
    goUserManagement() {
      if (this.$router.currentRoute.name !== 'UserManagement') {
        this.$router.push({name: 'UserManagement'})
      }
    },
    goCampusManagement() {
      if (this.$router.currentRoute.name !== 'CampusManagement') {
        this.$router.push({name: 'CampusManagement'})
      }
    },
    goDepartmentManagement() {
      if (this.$router.currentRoute.name !== 'DepartmentManagement') {
        this.$router.push({name: 'DepartmentManagement'})
      }
    },
    goConferenceRoom() {
      if (this.role === '0' && this.$router.currentRoute.name !== 'ConferenceRoom') {
        this.$router.push({name: 'ConferenceRoom'})
        return
      }
      if (this.role !== '0' && this.$router.currentRoute.name !== 'ConferenceRoomManagement') {
        this.$router.push({name: 'ConferenceRoomManagement'})
      }
    },
    goDashboard() {
      if (this.$router.currentRoute.name !== 'Dashboard') {
        this.$router.push({name: 'Dashboard'})
      }
    },
    goAnnouncementManagement() {
      if (this.$router.currentRoute.name !== 'AnnouncementManagement') {
        this.$router.push({name: 'AnnouncementManagement'})
      }
    },
    goConferenceSummary() {
      if (this.$router.currentRoute.name !== 'ConferenceSummary') {
        this.$router.push({name: 'ConferenceSummary'})
      }
    },
    calculateActiveIndex() {
      switch (this.$route.name) {
        case 'ConferenceRoom':
          return '1'
        case 'ConferenceRoomManagement':
          return '1'
        case 'ConferenceList':
          return '2'
        case 'ConferenceReservations':
          return '3'
        case 'MeetingUsage':
          return '4'
        case 'UserManagement':
          return '5'
        case 'CampusManagement':
          return '6'
        case 'Dashboard':
          return '7'
        case 'AnnouncementManagement':
          return '8'
        case 'ConferenceSummary':
          return '9'
        case 'DepartmentManagement':
          return '10'
        default:
          return '1' // 默认激活第一个菜单项
      }
    },
  },

}
</script>

<style lang="less" src="@/assets/style/NavMenu.less"></style>
